<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wenjuandiaocha</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入样式element-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入cookie -->
    <script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-size: 14px;
            /* 可以消除边框对长宽的影响 */
        }

        #nav {
            width: 100%;
        }

        .logo {
            width: 10%;
            padding: 10px;
        }

        .logo img {
            width: 100%;
        }

        #cleft {
            width: 20%;
            float: left;
        }

        #cright {
            width: 80%;
            float: left;
        }

        #content {
            overflow: hidden;
        }

        .logout {
            float: right;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="nav">
            <div class="logo">
                <img src="/img/logo.png" alt="">
                <span>随堂问卷</span>
            </div>
            <div>
                {{page.title}}
            </div>
            <el-card style="margin:5px;" v-for="(item,index) in page.content" :key="'page_'+index" :header="item.text">
                <!-- 双向绑定 如果绑定的对象不存在，会自动创建对象 answer-->
                <el-radio-group v-model="page.content[index].answer">
                    <el-radio v-for="(i,index) in page.item" :key="'item_'+index" :label="i.id">{{i.text}}</el-radio>
                </el-radio-group>
            </el-card>
            <el-card style="margin-bottom:5px;" header="其他建议">
                <el-input type="textarea" :row="2" placeholder="其他建议" v-model="page.note">
                </el-input>
            </el-card>
        </div>
        <div>
            <el-button type="primary" @click="save">提交</el-button>
        </div>
    </div>
</body>
</html>
<script>
    // console.log(location)
    // 不通过cookie也能通过location中的search获取其中的id号
    var rvm = new Vue({
        el: '#container',
        created: function () {
            var _this = this,
                id = this.paperId
            $.get('/papers/find', { id: id }, function (result) {
                if (result.error != 0) return
                _this.page.title = result.data.title
                _this.page.content = JSON.parse(result.data.content)
            })
        },
        data: {
            paperId: Cookies.getJSON('release_paper_id'),
            page: {
                title: "",
                note: '',
                content: [],
                // 可以在后台将content与item保存在一起 
                // 需将这里的数据写入数据库，然后读出来， 大户句酷里的表必须做增删改查，必须列一个分组，父级对应多个子级
                item: [
                    { id: 1, text: '优秀', val: 5 },
                    { id: 2, text: '良好', val: 4 },
                    { id: 3, text: '中等', val: 3 },
                    { id: 4, text: '很差', val: 2 },
                ]
            },
        },
        methods: {
            save: function () {
                var _this = this,
                    arr = []
                for (i in _this.page.content) {
                    arr.push(_this.page.content[i].answer)
                }
                if (arr.indexOf(undefined) != -1) {
                    _this.$message({
                        type: "error",
                        message: "还有问卷题目未完成，请填写完整"
                    })
                    return
                } else {
                    $.post("/papers/release/add", {
                        // 所有保存到数据库的都要转化成字符串
                        paper_id: _this.paperId,
                        content: JSON.stringify(_this.page.content),
                        item: JSON.stringify(_this.page.item),
                        note: _this.page.note,
                        title: _this.page.title,
                        // 如果cuid相同，则表明重复提交（cuid是前后端唯一的）
                        cuid: Cookies.getJSON('releaseInfo' + _this.paperId).cuid
                    }, function (result) {
                        console.log(result)
                        // 页面自动刷新
                        location.reload()
                    })
                }
            }
        }
    })







</script>